/*
 * @Description: 我的车票列表页
 * @Author: shuaishuai.wang
 * @Date: 2019-08-21 09:49:25
 * @Last Modified by: ziwei.ma
 * @Last Modified time: 2019-11-01 09:54:38
 */
<template>
  <div
    class="main fontsize32 flex-v flex-vc flex-hc"
    v-wechat-title="$route.meta.title"
  >
    <!-- <loading
      :state="loadingState"
      :loadingType="loadingType"
    ></loading> -->
    <logout></logout>
    <xb-scroll
      ref="scroll"
      :getListData="getMyTicketList"
      :up="up"
      class="listScroll"
    >
      <div
        v-if="ticketList.length < 1"
        class="no_data"
      >
        <div class="icon">
          <img :src="noData">
        </div>
        <p>暂时没有可用车票</p>
        <div class="buy_ticket">
          <button
            @click="goToBuyIndex"
            class="fontsize32"
          >去购票</button>
        </div>
      </div>
      <div
        v-else
        class="ticket_list"
      >
        <h3 class="fontsize32 ticket_num">我的车票</h3>
        <my-ticket-item
          v-for="(ticket, index) in ticketList"
          :key="index"
          :ticket='ticket'
        ></my-ticket-item>
      </div>
    </xb-scroll>
    <a
      href="customizedShuttleBus.html#/my/failureTicket"
      class="fontsize32 invalidTicketEntry"
    >查看失效票>></a>
    <foot-bar selectedIndex="1"></foot-bar>
    <logout-popup ref="LogoutPopup"></logout-popup>
  </div>
</template>

<script>
import { XBScroll } from 'vue-xb-ui-depot'
import { getTicketList } from './../../interface/getInterface'
import Logout from '../../components/my/Logout'
import LogoutPopup from '../../components/my/LogoutPopup'
export default {
  components: {
    'xb-scroll': XBScroll,
    'logout': Logout,
    'logout-popup': LogoutPopup
  },
  data() {
    return {
      noData: require('@wechat/img/no-data.png'), // 无数据图片
      ticketList: [], // 车票数据
      ticketCount: 0, // 当前票数
      loadingState: true, // 页面加载状态
      loadingType: 'loading', // 页面加载类型
      useBody: false,
      up: {
        noMoreSize: 21,
        page: { size: 20 }
      }
    }
  },
  mounted() {
    // this.getMyTicketList()
    // 获取票列表，TICKET_STATE是1为正常票
    // getTicketList({ TICKET_STATE: 1 }).then(data => { // 请求接口获取数据
    //   this.ticketList = data.LIST
    //   this.ticketCount = data.COUNT
    //   this.loadingState = false
    // }).catch(err => {
    //   console.log(err)
    //   this.loadingType = 'fail'
    // })
  },
  methods: {
    goToBuyIndex() { // 跳转至车票详情
      this.$router.push({ name: 'buyIndex' })
    },
    getMyTicketList(PAGE_INDEX, PAGE_CAPACITY) {
      return getTicketList({ PAGE_INDEX, PAGE_CAPACITY, TICKET_STATE: 1 }).then(res => {
        if (res.COUNT === 0) {
          return { length: PAGE_CAPACITY, count: 1 }
        } else {
          this.ticketList = PAGE_INDEX === 1 ? res.LIST : this.ticketList.concat(res.LIST)
          return { length: PAGE_CAPACITY, count: res.COUNT }
        }
      }).catch(err => {
        console.warn(err)
        return { length: PAGE_CAPACITY, count: 1 }
      })
    },
    showLogout() {
      this.$refs.LogoutPopup.mask.show()
    }
  }
}
</script>

<style lang="scss" scoped>
.main {
  width: 100%;
  margin-bottom: 100px;
  height: calc(100%-100px);
  box-sizing: border-box;
  background-color: #f2f5f6;
  margin-bottom: 100px;
  .no_data {
    .icon {
      width: 522px;
      margin: auto;
      padding-top: 64px;
      padding-bottom: 32px;
      img {
        width: 100%;
      }
    }
    p {
      text-align: center;
      color: #9fb0b2;
    }
    .buy_ticket {
      width: 240px;
      margin: 160px auto 32px;
      button {
        width: 100%;
        height: 68px;
        background: rgba(2, 122, 255, 1);
        border-radius: 34px; /*no*/
        border: 1px; /*no*/
        color: #fff;
      }
    }
  }
  .ticket_list {
    // margin-top: 264px;
    .ticket_num {
      padding: 32px 32px 0 32px;
    }
  }
  .listScroll {
    // margin-bottom: 30px;
  }
  .invalidTicketEntry {
    color: #027aff;
    margin: 10px;
    // text-align: center;
  }
}
</style>
